<template>
	<view class="SearchMusic">
		<!-- 搜索页面 -->
		<!-- 搜索框 -->
		<view class="searchBox flex-center">
			<view class="search flex-center">
				<uni-icons type="search" color="#d6d6d6" size="1.5em"></uni-icons>
				<input @confirm="searchConfirm" auto-focus="auto-focus" v-model="search.value" @input="searchInput"
					@focus="search.IsFocus = true" @blur="searchBlur" confirm-type="search"
					placeholder="搜索 音乐/专辑/歌单/用户/歌词" />
				<uni-icons @click="search.value = ''" v-show="search.IsFocus" type="closeempty" color="#7a7a7a"
					size="1.5em"></uni-icons>
			</view>
			<view v-show="search.IsFocus" class="cancel" @click="search.value = ''">取消</view>
		</view>
		<!-- 搜索热词 -->
		<!-- :show="search.value==''" -->


		<Transition enter-active-class="animate__animated animate__fadeIn">
			<view class="hotkey animate__animated animate__fadeIn" v-show="search.value==''" key="hotkey">
				<view v-show="Hotkey.length!=0">热门搜索</view>
				<view>
					<view v-for="(item,index) in Hotkey" :key="index" @click="toSearchByKey(item.k)">{{item.k}}</view>
				</view>
			</view>
		</Transition>

		<!-- 搜索提示 -->
		<view class="searchHint" v-show="search.value.trim()!==''" key="searchHint">
			<TransitionGroup enter-active-class="animate__animated animate__fadeIn animate__delay-1s">
				<view v-show="smartBox.song.itemlist.length!=0" key="song">
					<view>{{smartBox.song.name}}</view>
					<view>
						<view v-for="(item,index) in smartBox.song.itemlist" :key="index"
							@click="toSearchByKey(item.name)">
							<view><span>名称:</span>{{item.name}}</view>
							<view><span>歌手:</span>{{item.singer}}</view>
						</view>
					</view>
				</view>

				<view v-show="smartBox.singer.itemlist.length!=0" key="singer">
					<view>{{smartBox.singer.name}}</view>
					<view>
						<view v-for="(item,index) in smartBox.singer.itemlist" :key="index"
							@click="toSearchByKey(item.name)">
							<view><span>名称:</span>{{item.name}}</view>
							<view><span>账号:</span>{{item.singer}}</view>
						</view>
					</view>
				</view>

				<view v-show="smartBox.mv.itemlist.length!=0" key="mv">
					<view>{{smartBox.mv.name}}</view>
					<view>
						<view v-for="(item,index) in smartBox.mv.itemlist" :key="index"
							@click="toSearchByKey(item.name)">
							<view><span>名称:</span>{{item.name}}</view>
							<view><span>歌手:</span>{{item.singer}}</view>
						</view>
					</view>
				</view>

				<view v-show="smartBox.album.itemlist.length!=0" key="album">
					<view>{{smartBox.album.name}}</view>
					<view>
						<view v-for="(item,index) in smartBox.album.itemlist" :key="index"
							@click="toSearchByKey(item.name)">
							<view><span>名称:</span>{{item.name}}</view>
							<view><span>歌手:</span>{{item.singer}}</view>
						</view>
					</view>
				</view>
			</TransitionGroup>
		</view>

	</view>
</template>

<script setup>
	import {
		ref,
		onUnmounted
	} from 'vue';
	import {
		GetHotkey,
		GetSmartbox
	} from "@/utils/MusicAPI.js"
	// 搜索框 完成事件
	const searchConfirm = () => {
		if (search.value.value.trim().length == 0) {
			uni.showToast({
				icon: "none",
				title: "输入框是空的呢 (●'◡'●)",
				duration: 1000
			});

		} else {
			toSearchByKey(search.value.value)
		}
	}
	//前往搜索结果页
	const toSearchByKey = (key) => {
		uni.redirectTo({
			url: "/pages/SearchByKey/SearchByKey?key=" + key
		})
	}
	//存放搜索热词
	const Hotkey = ref([])
	//获取搜索热词
	const getHotkey = () => {
		GetHotkey().then(res => {
			Hotkey.value = res.data.response.data.hotkey
		}).catch(err => {
			console.log("获取搜索热词错误", err)
		})
	}
	getHotkey()

	// 搜索框属性
	const search = ref({
		IsFocus: false,
		value: ""
	})
	// 搜索框失去焦点
	const searchBlur = () => {
		setTimeout(() => {
			search.value.IsFocus = false
		}, 100)
	}
	//提示文本
	const smartBox = ref({
		"album": {
			"count": 2,
			"itemlist": [],
			"name": "专辑",
			"order": 2,
			"type": 3
		},
		"mv": {
			"count": 2,
			"itemlist": [],
			"name": "MV",
			"order": 3,
			"type": 4
		},
		"singer": {
			"count": 2,
			"itemlist": [],
			"name": "歌手",
			"order": 1,
			"type": 2
		},
		"song": {
			"count": 4,
			"itemlist": [],
			"name": "单曲",
			"order": 0,
			"type": 1
		}
	})

	// 搜索框 值改变触发
	const searchInput = () => {
		getSmartbox(search.value.value)
	}

	//获取关键字搜索提示
	//http://8.138.106.192:3200/getSmartbox?key=给你
	const getSmartbox = (key) => {
		if (key.trim().length !== 0) {
			GetSmartbox(key).then(res => {
				smartBox.value = res.data.response.data
			}).catch(err => {
				console.log("获取搜索提示错误", err)
			})
		}
	}
	getSmartbox(search.value.value)
</script>

<style scoped>
	.SearchMusic {
		padding: 0 20rpx;
		color: #dddddd;
	}

	.searchBox {
		margin-top: 10rpx;
		transition: 0.5s;
	}

	.search {
		width: 100%;
		margin-top: 0;
		padding: 10rpx 20rpx;
		justify-content: space-between;
	}

	.search>input {
		width: 100%;
		padding: 0 10rpx;
	}


	.cancel {
		width: 3em;
		text-align: center;
		color: #dddddd;
	}

	.searchHint>view {
		padding: 10rpx;
	}

	.searchHint>view>view:nth-child(1) {
		font-size: 1.5em;
		font-weight: bold;
		margin-bottom: 10rpx;
		color: #7d7daa;
	}

	.searchHint>view>view:nth-child(2)>view {
		margin-bottom: 15rpx;
		box-shadow: 0px 5px 5px -4px #565676;
		padding: 5rpx 10rpx;
	}


	.searchHint>view>view:nth-child(2)>view>view>span {
		color: #7a7a7a;
		font-weight: bold;
		margin-right: 10rpx;
	}

	/* 搜索热词*/
	.hotkey {
		padding: 0 10rpx;
	}

	.hotkey>view:nth-child(1) {
		font-size: 2em;
		font-weight: bold;
		margin: 15rpx 0;
	}

	.hotkey>view:nth-child(2) {
		display: flex;
		flex-wrap: wrap;
	}

	.hotkey>view:nth-child(2)>view {
		margin: 10rpx 15rpx;
		padding: 10rpx 20rpx;
		background-color: #32323a;
		border-radius: 2em;
	}

	.hotkey>view:nth-child(2)>view:nth-child(1) {
		color: #bdbdff;
	}
</style>